<template>
  <div>
    <!-- 之前用的v-if真tm蠢 -->
    <tabbar class="tabbar" v-show="$store.state.isNavShow"></tabbar>
    <!-- 这里的router-view实际上就是把slot插槽又封装了一遍,做成了一个组件，我在router路由里配置好路径和对应的组件，只要路径对了，组件就会插进来
        写三次就插三次 -->
    <div class="content">
      <transition name="change" mode="out-in">
        <router-view></router-view>
      </transition>
    </div>
  </div>
</template>

<script>
import tabbar from '@/components/TabBar.vue'
import axios from 'axios'

export default {
  components: {
    tabbar
  },
  data () {
    return {
      // routes: ["/films", "/cinemas", "/center"],
    }
  },
  mounted () {

    this.$store.commit('getNavBarHeight', document.querySelector('.navigation').offsetHeight)

    // 注意local.href拿到的是完整的路径，而local.hash拿到的域名/后的路径，比如http://192.168.1.6:8080/#/center/
    // local.href： http://192.168.1.6:8080/#/center/   local.hash:  #/center/
    // 但是都可以通过改变这两个属性来跳转页面href可以输入完整的网址带协议的，也可输入部分路径，就是在域名后的('#/films/')
    // 而hash代表的仅仅是跟在域名后的部分路径，跟href的第二种情况一致，注意的时，两者都可以省略第一个'/'和最后一个'/'
    // 但是vue-router处理'/'的路由可以简写成''之外都不可简写
    // 路由原理：采用location.hash可以获得当前hash也就是  url的域名后的部分，比如#/films/
    // console.log(location.hash);
    // console.log(location)
    // 此为window(bom)里的方法，绑定监听hash，也就是url一旦改变就会触发
    // 注意:使用router-link配合hash方式的时候, onhashchange绑定的方法被重写, 所以我写的这个会被覆盖, 所以路由的原理用了这个是必然的
    // onhashchange = () => {
    //   console.log(location.hash);
    // };
    // onpopstate = () => {
    //   console.log(history.pushState)
    // }
    // 那么路由的原理就是我在created/mounted时使用onhashchange监听hash的变化也就是url的变化，一旦变化就把location.hash传给状态
    // 设置一个component :is:which   is属性绑定一个变量就是which状态(存location.hash过滤后的结果，去#和/)，
    // 比如我此时改变了路径local.hash='#/films/'，我就可以直接得到which = fimls
    // 然后我在导入对应的组件，名字就叫films就可以显示出对应的组件了，这样就达到了根据路径切换组件的效果，也就时vue-router的雏形
    // 那么如果我写了三个按钮或<a>链接跳转不同的路由，我要根据不同的路由显示对应的按钮或<a>链接高光呢，也是一样，
    // 得到local.hash后匹配对应的按钮，先清楚所有的class，并赋予按钮或<a>链接class对应的高光class的名字就行了
    // 实际上vue提供了router-link 已经帮我们监听高光的生成了，和vue-router配套使用的
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
}

</style>

<style lang="scss" scoped>
@keyframes leave{
  0%{
    opacity: 0.5;
    transform: translateY(0);
  }
  100%{
    opacity: 0;
    transform: translateY(3.125rem);
  }
}
@keyframes enter{
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.change-enter-active{
  animation: enter 0.4s;
}
.change-leave-active{
  animation: leave 0.4s;
}
.content{
  margin-bottom: 3.125rem;
}
.tabbar{
  z-index: 1000;
}
</style>
